<template>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="900px"
      :show-close="false"
      :close-on-click-modal="false"
      :before-close="dialogBeforeClose"
      append-to-body
      class="dialog"
    >
        <div class="flexReport">
            <div>检测报告</div>
            <i class="el-icon-close" @click="dialogBeforeClose()"></i>
        </div>
        <div class="tableGreenBox mt20">
            <el-table
                class="tableGreen"
                :data="reportList"
                style="width: 100%"
            >
                <el-table-column header-align="center" align="center" label="检测报告名称" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="检测机构">
                    <template slot-scope="scope">
                        <span>{{ scope.row.company }}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="颁发日期" width="160">
                    <template slot-scope="scope">
                        <span>{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="报告编号" width="160">
                    <template slot-scope="scope">
                        <span>{{ scope.row.numbering }}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toNext(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-dialog>
  </template>

<script>
import { getPesticideList } from '@/api/agriLand'
export default {
  name: 'report',
  components: {
  },
  data () {
    return {
      dialogVisible: false,
      baseId: 0,
      reportList: []
    }
  },
  computed: {
  },
  created () {
  },
  methods: {
    getList () {
      this.dialogVisible = true
      getPesticideList({ id: this.$route.query.id }).then(res => {
        this.reportList = res.data
      })
    },
    toNext (item) {
      window.open(item.pdf, '_blank')
    },
    dialogBeforeClose () {
      this.dialogVisible = false
    }
  }
}
</script>
  <style scoped lang="scss">
  ::v-deep .el-dialog__header {
    padding: 0;
  }
  ::v-deep .el-dialog__body {
    padding: 20px 20px 20px 20px;
    max-height: 70vh;
    overflow-y: auto;
  }
  .el-dialog__title {
    border-left: 3px solid #19b560;
    padding: 0 0.5208vw;
    font-weight: 500;
  }
  .flexReport {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 22px;
    color: #333;
    font-weight: bold;
    margin-bottom: 30px;
    .el-icon-close {
        font-size:26px;
        font-weight: 500;
        color: #666666
    }
  }
  </style>
